import {IndexRouteObject, NonIndexRouteObject, useRoutes} from 'react-router';
import PageLayout from '@/layout';
import Login from '@/pages/login';
import {AuthRoute} from '@/routes/AuthRoute.tsx';
import {LazyLoading} from '@/utils/routerUtil.tsx';
import {lazy} from 'react';

const Home = lazy(() => import('@/pages/home'));
const Page1 = lazy(() => import('@/pages/page1'));
const Page2 = lazy(() => import('@/pages/page2'));

// 扩展Route定义
interface CustomRouteFields {
    meta?: {
        title: string;
    };
}

type AppIndexRouteObject = IndexRouteObject & CustomRouteFields;
type AppNonIndexRouteObject = Omit<NonIndexRouteObject, 'children'> &
    CustomRouteFields & {
        children?: (AppIndexRouteObject | AppNonIndexRouteObject)[];
    };

export type RouteProps = AppIndexRouteObject | AppNonIndexRouteObject;
const routeList: RouteProps[] = [
    {
        path: '/',
        element: (
            <AuthRoute>
                <PageLayout />
            </AuthRoute>
        ),
        children: [
            {
                path: '/',
                meta: {
                    title: 'home',
                },
                element: (
                    <LazyLoading>
                        <Home />
                    </LazyLoading>
                ),
            },
            {
                path: 'page1',
                meta: {
                    title: 'page1',
                },
                element: (
                    <LazyLoading>
                        <Page1 />
                    </LazyLoading>
                ),
            },
            {
                path: 'page2',
                meta: {
                    title: 'page2',
                },
                element: (
                    <LazyLoading>
                        <Page2 />
                    </LazyLoading>
                ),
            },
        ],
    },
    {
        path: '/login',
        element: <Login />,
    },
    {
        path: '*',
        element: <div>404</div>,
    },
];

// 渲染路由配置
const RenderRoutes = function () {
    return useRoutes(routeList);
};

// 返回侧边栏所需要的数组
export const getSiderRoutes = (): RouteProps[] => {
    return routeList.find(v => v.path === '/')!.children!;
};
export default RenderRoutes;
